<template>
  <view class="forgot-page">
    <!-- 顶部标题 -->
    <view class="header">
      <text class="title">忘记密码</text>
      <text class="subtitle">请验证您的手机号并设置新密码</text>
    </view>

    <!-- 密码重置表单 -->
    <AuthForm
      :form-items="formItems"
      :submit-text="'重置密码'"
      @submit="handleResetPassword"
      :nav-text="'没有账号？立即注册'"
      @navigate="handleNavigate"
    >
      <template #extra>
        <view class="nav-link">
          <text @click="navigateToLogin">想起密码了？去登录</text>
        </view>
      </template>
    </AuthForm>
  </view>
</template>

<script setup>
import { ref, onBeforeUnmount } from "vue";
import AuthForm from "./components/AuthForm.vue";

const countdown = ref(0);
const codeDisabled = ref(false);
let timer = null;

// 表单配置
const formItems = ref([
  {
    type: "text",
    name: "mobile",
    label: "手机号",
    placeholder: "请输入注册手机号",
    value: "",
    rules: [
      { required: true, message: "请输入手机号" },
      { pattern: /^1[3-9]\d{9}$/, message: "手机号格式不正确" },
    ],
  },
  {
    type: "text",
    name: "code",
    label: "验证码",
    placeholder: "请输入6位验证码",
    value: "",
    extra: {
      type: "code",
      text: "获取验证码",
      onClick: getSmsCode,
    },
    rules: [
      { required: true, message: "请输入验证码" },
      { len: 6, message: "验证码为6位数字" },
    ],
  },
  {
    type: "password",
    name: "newPassword",
    label: "新密码",
    placeholder: "请输入6-20位新密码",
    value: "",
    rules: [
      { required: true, message: "请输入新密码" },
      { min: 6, max: 20, message: "密码长度6-20位" },
    ],
  },
  {
    type: "password",
    name: "confirmPassword",
    label: "确认密码",
    placeholder: "请再次输入新密码",
    value: "",
    rules: [
      { required: true, message: "请确认密码" },
      { validator: validatePassword },
    ],
  },
]);

// 密码验证
function validatePassword(rule, value, callback, formData) {
  if (value !== formData.newPassword) {
    callback(new Error("两次输入密码不一致"));
  } else {
    callback();
  }
}

// 获取短信验证码
function getSmsCode() {
  const mobileItem = formItems.value.find((item) => item.name === "mobile");
  const mobile = mobileItem.value;

  // 验证手机号
  if (!mobile) {
    uni.showToast({
      title: "请输入手机号码",
      icon: "none",
    });
    return;
  }

  if (!/^1[3-9]\d{9}$/.test(mobile)) {
    uni.showToast({
      title: "手机号格式不正确",
      icon: "none",
    });
    return;
  }

  // 开始倒计时
  countdown.value = 60;
  codeDisabled.value = true;

  // 模拟发送验证码
  uni.showToast({
    title: "验证码已发送",
    icon: "none",
  });

  // 启动倒计时
  timer = setInterval(() => {
    countdown.value--;
    if (countdown.value <= 0) {
      clearInterval(timer);
      codeDisabled.value = false;
    }
  }, 1000);

  // 实际项目中这里调用API发送短信
  // sendResetPasswordSms(mobile).then(...)
}

// 处理密码重置
function handleResetPassword(formData) {
  uni.showLoading({ title: "正在重置..." });

  // 模拟API请求
  setTimeout(() => {
    uni.hideLoading();
    uni.showToast({
      title: "密码重置成功",
      icon: "success",
    });

    // 跳转到登录页
    setTimeout(() => {
      uni.redirectTo({
        url: "/pages/login/login",
      });
    }, 1500);
  }, 2000);
}

// 返回登录页
const navigateToLogin = () => {
  uni.redirectTo({
    url: "/pages/login/login",
  });
};

// 导航到注册
function handleNavigate() {
  uni.navigateTo({
    url: '/pages/login/register'
  });
}

// 清除定时器
onBeforeUnmount(() => {
  if (timer) clearInterval(timer);
});
</script>

<style lang="scss" scoped>
.forgot-page {
  padding: 60rpx 50rpx;
  min-height: 100vh;
  background-color: $white-bg;

  .header {
    margin-bottom: 60rpx;

    .title {
      display: block;
      font-size: $font-size-40rpx;
      color: $text-color;
      font-weight: bold;
      margin-bottom: 20rpx;
    }

    .subtitle {
      font-size: $font-size-28rpx;
      color: $text-color-666;
    }
  }

  .nav-link {
    text-align: center;
    margin-top: 40rpx;

    text {
      color: $primary-color;
      font-size: $font-size-26rpx;
    }
  }
}
</style>
